<template>
  <div class="p-6" :style="{ paddingTop: navHeight + 'px' }">
    <!-- 搜索与筛选 -->
    <div class="mb-6 space-y-4">
      <div class="flex flex-wrap items-center gap-4">
        <input v-model="keyword" placeholder="搜索宠物关键词" class="input" />
        <button @click="search" class="btn-primary">搜索</button>
      </div>

      <!-- 筛选组 -->
      <div class="filter-group">
        <button @click="toggle('gender', '男')" :class="btnClass(gender === '男')">男</button>
        <button @click="toggle('gender', '女')" :class="btnClass(gender === '女')">女</button>
        <button @click="toggle('vaccinated', '1')" :class="btnClass(vaccinated === '1')">已接种</button>
        <button @click="toggle('healthy', '1')" :class="btnClass(healthy === '1')">无疾病</button>
        <button @click="toggle('office', '1')" :class="btnClass(office === '1')">官方发布</button>
        <button @click="toggle('office', '0')" :class="btnClass(office === '0')">个人发布</button>

        <div class="areainput">
          <span>地区:</span>
          <input v-model="region" placeholder="地区" class="input-sm" />
        </div>

        <div class="ageinput">
          <span>年龄:</span>
          <input v-model.number="ageMin" type="number" placeholder="最小" class="input-sm w-20" />
          <span>-</span>
          <input v-model.number="ageMax" type="number" placeholder="最大" class="input-sm w-20" />
        </div>
      </div>
    </div>

    <!-- 展示区 -->
    <div v-if="pets.length === 0" class="text-center text-gray-500 py-10 text-lg">
      😿 暂无符合条件的宠物
    </div>

    <div v-else class="pet-grid">
      <div v-for="pet in pets" :key="pet.petId" class="pet-card">
        <img v-if="pet.coverImage" :src="pet.coverImage" alt="宠物图片" class="pet-image" />
        <div class="text-lg font-semibold text-gray-800">{{ pet.petName }}</div>
        <div class="text-sm text-gray-600">品种：{{ pet.breed || '未知' }}</div>
        <div class="text-sm text-gray-600">年龄：{{ pet.age }} 岁</div>
        <div class="text-sm text-gray-600">性别：{{ pet.gender }}</div>
        <div class="text-sm text-gray-600">地区：{{ pet.region }}</div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, onMounted } from 'vue'

const navHeight = 50
const keyword = ref('')
const gender = ref('')
const vaccinated = ref('')
const healthy = ref('')
const office = ref('')
const region = ref('')
const ageMin = ref<number | null>(null)
const ageMax = ref<number | null>(null)

const pets = ref<any[]>([])

onMounted(() => {
  search()
})

const btnClass = (active: boolean) => `btn-filter ${active ? 'active' : ''}`

const toggle = (key: string, value: string) => {
  switch (key) {
    case 'gender': gender.value = gender.value === value ? '' : value; break
    case 'vaccinated': vaccinated.value = vaccinated.value === value ? '' : value; break
    case 'healthy': healthy.value = healthy.value === value ? '' : value; break
    case 'office': office.value = office.value === value ? '' : value; break
  }
}

const search = async () => {
  try {
    const res = await axios.get('/api/pets/search', {
      params: {
        keyword: keyword.value || undefined,
        gender: gender.value || undefined,
        vaccinated: vaccinated.value || undefined,
        healthy: healthy.value || undefined,
        office: office.value || undefined,
        region: region.value || undefined,
        ageMin: ageMin.value ?? undefined,
        ageMax: ageMax.value ?? undefined
      }
    })
    pets.value = res.data.data.item
  } catch (error) {
    console.error('搜索出错:', error)
  }
}
</script>

<style scoped>
/* 输入框 */
.input {
  flex-grow: 1;
  min-width: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}

.input:focus {
  border-color: #42756b; /* 蓝色聚焦边框 */
}

.areainput,
.ageinput {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151; /* 深灰文字 */
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
}

.ageinput span,
.areainput span {
  white-space: nowrap;
}


/* 小输入框 */
.input-sm {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  min-width: 60px;
  max-width: 120px;
  flex-shrink: 0; /* ✅ 加上这个 */
}

.input-sm.w-20 {
  width: 80px;
}

.input-sm:focus {
  border-color: #42756b;
}

/* 主按钮 */
.btn-primary {
  background-color: #42756b; /* 蓝色 */
  color: white;
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #42756b;
}

/* 次级按钮 */
.btn-secondary {
  border: 1px solid #d1d5db; /* 灰色边框 */
  color: #374151;
  padding: 8px 20px;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background-color: #f3f4f6;
}

/* 筛选按钮 */
.btn-filter {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background-color: white;
  color: #1f2937;
  transition: all 0.3s;
}

.btn-filter.active,
.btn-filter:hover {
  background-color: #42756b;
  color: white;
  border-color: #42756b;
}

/* 筛选组容器，支持换行 */
.filter-group {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 12px;
  max-width: 1200px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* 搜索框和按钮容器 */
.flex {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 1200px;
}

/* 宠物卡片网格 */
.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

/* 宠物卡片 */
.pet-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  max-width: 280px;
}

.pet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 宠物图片 */
.pet-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* 分页按钮容器 */
.mt-6 {
  margin-top: 24px;
}

.justify-center {
  display: flex;
  justify-content: center;
}

/* 文字颜色 */
.text-gray-500 {
  color: #6b7280;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-800 {
  color: #1f2937;
}

/* 文字大小 */
.text-lg {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  margin-bottom: 6px;
}

.text-sm {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 4px;
}

/* 文字居中 */
.text-center {
  text-align: center;
  padding: 40px 0;
}
</style>
